<template>
  <div>    
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.keyName"
            maxlength="32"
            show-word-limit
            :placeholder="$t('modules.pass.key_name')"
            clearable
            @blur="() => (dataForm.keyName = dataForm.keyName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('page.status')"
            style="width: 100%"
          >
            <el-option
              v-for="item in statusList"
              :key="item.code"
              :value="item.code"
              :label="$t(item.label)"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="searchNFC">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="addNFC">
            <svg-icon icon-class="plus" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe class="passTable">
        <el-table-column key="keyName" prop="keyName" :label="$t('modules.pass.key_name')" />
        <el-table-column key="publicKey" prop="publicKey" :label="$t('modules.pass.public_key')">
          <template v-slot="scope" ><div :title="scope.row.publicKey" class="ellipsis">{{ scope.row.publicKey }}</div></template>
        </el-table-column>
        <el-table-column key="status" prop="status" min-width="100" :label="$t('operator.status')">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="info">
              {{ $t('modules.pass.normal') }}
            </el-tag>
            <el-tag v-if="scope.row.status === 1" size="small">
              {{ $t('modules.pass.used') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column key="description" prop="description" :label="$t('common.description')" >
          <template v-slot="scope" ><div :title="scope.row.description" class="ellipsis">{{ scope.row.description }}</div></template>
        </el-table-column>
        <el-table-column key="creTime" prop="creTime" :label="$t('common.createTime')">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="deleteNFC(scope.row.id)" danger>
                    <svg-icon icon-class="outlined-delete" />
                    {{ $t('page.delete') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <addNfc
      v-model="addNfcVisible"
      :title="$t('modules.pass.add_nfc')"
      @refresh="getData((this.pageNo = 1))"
    />
  </div>
</template>

<script>
import { isAuth } from '@/utils'
import { timeFilter, dateFilter } from '@/filters/index'
import PageTitle from '@/components/PageTitle/index.vue'
import { getNFCList, deleteNFC } from '@/api/pass-generate'
import addNfc from './components/addNfc.vue'
export default {
  components: {
    PageTitle,
    addNfc
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        keyName: '',
        status: ''
      },
      statusList: [
        {
          code: 0,
          label: 'modules.pass.normal'
        },
        {
          code: 1,
          label: 'modules.pass.used'
        }
      ],
      dataListLoading: false,
      dataList: [],
      addNfcVisible: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    timeFilter,
    dateFilter,
    isAuth,
    currentChangeHandle(val) {
      this.pageNo = val
      this.getData()
    },
    searchNFC() {
      this.pageNo = 1
      this.getData()
    },
    addNFC() {
      this.addNfcVisible = true
    },
    back() {
      this.$router.back()
    },
    getData() {
      let params = {
        keyName: this.dataForm.keyName,
        status: this.dataForm.status,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getNFCList(params)
        .then((res) => {
          this.dataList = res.data
          this.totalPage = res.rows
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    deleteNFC(id) {
      this.$confirm(this.$t('modules.pass.delete_tip'), this.$t('modules.pass.warning'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'delete'
      })
        .then(() => {
          let params = {
            id: id
          }
          deleteNFC(params)
            .then((res) => {
              this.$message({
                type: 'success',
                message: this.$t('modules.pass.delete_complete')
              })
              this.getData((this.pageNo = 1))
            })
            .catch((err) => {
              this.$confirmError(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('modules.pass.delete_canceled')
          })
        })
    }
  }
}
</script>
<style lang="scss" scope>
.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
